<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1 id="box" ref="box">{{msg}}</h1>
  </div>
  <script src="./vue.js"></script>
  <script>
    // Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、
    // 挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

    // 初次进入一个vue组件 会触发哪些生命周期
    //  beforeCreate 创建前  created 创建后  beforeMount 挂载前  mounted 挂载后
    // 生命周期对应的钩子函数
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "你好",
          num: 888
        }
      },
      methods: {
        say() {
          alert(1)
        }
      },
      beforeCreate() { //实例创建前 数据  根元素  函数 都未初始化 
        console.group("实例创建前")
        // this---vue 
        console.log(this.$el) // undefined
        console.log(this.msg)// undefined
        // this.say(); //报错
      },
      created() { //实例创建后  数据初始化完成 函数准备完成  根元素未初始化
        console.group("实例创建后")
        console.log(this.$el) // undefined
        console.log(this.msg)// 你好
        // this.say();//正常调用
      },
      beforeMount() { //实例挂载前 数据 根元素 函数等准备就绪
        console.group("实例挂载前")
        console.log(this.$el) // undefined
        console.log(this.msg)// 你好
        // this.say();//正常调用
      },
      mounted() { //实例挂载后 数据 根元素 函数等准备就绪 页面渲染完成 可以进行dom操作
        //实例挂载后
        console.group('实例挂载后')
        console.log(this.$el) //div#app
        console.log(this.msg) //你好
        // this.say() //正常调用
        this.msg = "废物"
        // document.getElementById("box").innerHTML = "哈哈哈"
        //vue 提供操作dom和组件的方式 ref 标注
        // this.$refs.box.innerHTML = "晚上整点不"
        this.num = 888;
      },
      beforeUpdate() {
        // 实例更新前  更新实例的数据从而触发了dom的改变才会触发beforeUpdate和updated
        console.log("实例更新前")
      },
      updated() {
        //"实例更新前后"  更新实例的数据从而触发了dom的改变才会触发beforeUpdate和updated
        console.log("实例更新前后")
      },
      beforeDestroy() {
        console.log("实例销毁前")
      },
      destroyed() {
        console.log("实例销毁后")
      }
    })
    // 全局api
    // vm.$el  vm.$watch  
    //vue全局api提供了 $destory() 销毁实例方法
    vm.$destroy()//销毁实例
    vm.msg = "明天放假"

  </script>
</body>

</html>